<template>
  <div id="goods">
    <div class="goods_left">
      <van-sidebar v-model="activeKey" id="aaa">
        <van-sidebar-item
          v-for="item in goodslist"
          :key="item.name"
          :title="item.name"
          
        />
      </van-sidebar>
    </div>
    <div class="goods_right">
      <div v-for="(item, index) in goodslist" :key="index">
        <h4 style="margin-bottom: 10px">{{ item.name }}</h4>
        <div class="goods_list" v-for="(list, index) in item.foods" :key="index">
          <img :src="list.imgUrl" alt="" />
          <div>
            <h3>{{list.name}}</h3>
            <van-button
              type="primary"
              style="margin: 10px 4px 10px 0; vertical-align: middle"
              size="mini"
              >特惠</van-button
            >
            <p style="color: #aaa;font-size:14px;margin-bottom:10px">
              <span style="padding-right: 20px">月售{{list.sellCount}}份</span>
              <span>好评度{{list.rating}}%</span>
            </p>
            <div class="price">
              <span style="color: red; font-size: 20px">￥{{list.price}}</span>
              <span
                style="
                  color: #aaa;
                  padding: 0 4px;
                  font-size: 12px;
                  line-height: 30px;
                  text-decoration: line-through;
                "
                >￥{{list.price+5}}</span
              >
              <van-stepper
                theme="round"
                input-width="20px"
                button-size="22px"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="app_bottom" @click="bottomClick">
      <span
        ><van-icon
          name="cart"
          style="font-size: 40px; vertical-align: middle; margin-right: 10px"
        />预估另需配送费 <span>4</span>元
      </span>
      <span>￥ <span>20</span>元起送 </span>
    </div>

    <van-popup
      v-model="bottomshow"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <p
        style="
          text-align: center;
          background: yellowgreen;
          color: #fff;
          line-height: 30px;
        "
      >
        新用户下单立减5元
      </p>
      <p
        style="
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          padding: 10px;
        "
      >
        <span>购物车</span>
        <span style="color: #aaa"
          ><van-icon
            name="delete"
            style="vertical-align: middle"
          />清空购物车</span
        >
      </p>

      <div>
        <div
          style="display: flex; padding: 10px; justify-content: space-between"
        >
          <p
            style="
              width: 150px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            单人荤素套餐
          </p>
          <span style="color: red; font-size: 20px">￥93.9</span>
          <van-stepper
            theme="round"
            input-width="20px"
            button-size="22px"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { goodslist } from "../apis/apis";

export default {
  data() {
    return {
      goodslist: [], //商品列表
      activeKey: 0,
      bottomshow: false,
    };
  },
  methods: {
    bottomClick() {
      this.bottomshow = true;
    },
  },
  created() {
    goodslist({}).then((res) => {
      // console.log(res.data.goodsList);
      this.goodslist = res.data.goodsList;

    });
  },
};
</script>

<style lang="less" scoped>

#goods {
  display: flex;
  flex: 1;
  overflow: hidden;

  .goods_left {
    background: #f2f2f2;

    width: 80px;
    overflow: scroll;
    p {
      height: 40px;
      text-align: center;
      border: 1px solid #000;
    }
  }

  .goods_right {
    flex: 1;
    overflow: scroll;
    h4 {
      background: #f2f2f2;
      line-height: 30px;
      color: rgb(99, 99, 99);
      padding-left: 10px;
      border-left: 3px solid #aaa;
      font-weight: normal;
    }
    .goods_list {
      height: 120px;
      display: flex;
      padding: 10px;
      margin-bottom: 20px;
      img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        margin-top: 10px;
      }
      .price {
        display: flex;
      }
    }
  }
}
</style>